<template>
  <section class="decoration-edit">
    <section class="l">
      <ul @dragstart="dragStart" @dragend="dragEnd">
        <li v-for="(val, key, index) in typeList" draggable :data-type="key" :key="index + 1">
          <span :class="val.icon"></span>
          <p>{{ val.name }}</p>
        </li>
      </ul>
    </section>
    <section class="c">
      <!-- header 不可拖拽 -->
      <div class="top-nav" @click="selectType(0)" :style="{ backgroundColor: info.navBackgroundColor }">
        <!-- <img src="https://pili-vod.guanxikeji.com/kongjiandongneng/img/1711788732636.png" /> -->
        <!-- <span class="tit" :style="{ color: info.titleColor }">{{
          info.title
        }}</span> -->
      </div>
      <div ref="box" class="view-content" @drop="drog" @dragover="dragOver" :style="{
        backgroundColor: info.backgroundColor,
      }" style="background-repeat: no-repeat; background-size: 100% 100%" @click="selectType(0)">
        <el-button v-if="view[0].data.length > 1" class="btn" @click="changeBackgroundImage()"
          icon="el-icon-arrow-right" circle size=""></el-button>
        <Draggable :move="onMove" @end="onEnd" v-model="view" draggable=".item">
          <template v-for="(item, index) in view">
            <div :data-index="index" :key="index" class="item" @click="selectType(index)">
              <template v-if="item.data.length > 0">
                <component :is="typeList[item.type]['com']" :data="item" :currentIndex="currentIndex"
                  :className="className[item.tabType]">
                </component>
              </template>
              <i @click="deleteItem($event, index)" class="el-icon-error"></i>
            </div>
          </template>
        </Draggable>
      </div>
    </section>
    <section class="r">
      <EditForm :data="props" v-if="isRight"></EditForm>
    </section>

    <div class="submit-btn">
      <el-button @click="submit">提交页面</el-button>
    </div>
  </section>
</template>

<script>
import Draggable from "vuedraggable";
// import { imageUpload } from '@/api/commodity'
import EditForm from "../../components/template1/draggView/share";
import sharebox from "../../components/template1/draggView/sharebox";

export default {
  components: {
    EditForm,
    Draggable,
    sharebox,

  },
  data() {
    return {
      vip: 0,//角色权限
      typeList: {
        sharebg: {
          name: "二维码",
          icon: "el-icon-help",
          com: sharebox,
        },

      },
      view: [
        {
          type: "sharebg",
          data: [{ box: 100 }],
          title: "点击设置背景图",
          backgroundColor: "#fff",
          backgroundImage: "",
          popUpWindow: "",
          time: 3,
        },

      ],
      title: "",
      type: "",
      index: null, // 当前组件的索引
      isPush: false, // 是否已添加组件
      props: {}, // 传值
      isRight: false,

      className: {
        1: "one",
        2: "two",
        3: "three",
        4: "four",
        5: "five",
        6: "six",

      },
      currentIndex: 0,
    };
  },
  computed: {

    info() {
      return this.view[0];
    },
  },
  watch: {
    view: {
      handler(newData, oldData) {
      },
      // 开启深度监听
      deep: true
    }
  },
  created() {
    let userinfo = JSON.parse(localStorage.getItem('admin_sys'))
    this.vip = userinfo.vip
    this.request('admin/decoration/', 'GET', { code: 2 }).then(
      res => {
        this.view = JSON.parse(res.data.explain)
        console.log(" this.view", this.view)

        this.$refs.box.style.backgroundImage = `url(${this.view[0].data[0].url})`

      },
      function () {
        console.log('请求失败处理');
      }
    );




  },
  methods: {

    // 定义一个函数来更改背景图片
    changeBackgroundImage() {
      // 设置盒子的背景图片
      if (this.currentIndex >= this.view[0].data.length - 1) {
        this.currentIndex = 0
      } else {
        this.currentIndex++
      }
      this.$refs.box.style.backgroundImage = `url(${this.view[0].data[this.currentIndex].url})`
    },
    submit() {
      // JSON 转换会丢失 formData
      const form = JSON.parse(JSON.stringify(this.view));

      console.log(form, "form1111")
      // this.$message.success(
      //   "数据提交成功，请按F12打开控制台查看待提交数据集合！"
      // );
      //
      this.request('admin/decoration/', 'post', { explain: JSON.stringify(form), code: 2 }).then(
        res => {
          this.$message.success(res.errmsg)
        },
        function () {
          console.log('请求失败处理');
        }
      );
      return;

      // 上传图片，修改数据字段（兼容接口
      const uploadPromise = {};
      for (let i = 0; i < this.view.length; i++) {
        if (["images", "banner"].includes(this.view[i].type)) {
          uploadPromise[i] = [];
          let list = this.view[i]["data"];
          list.forEach((item, index) => {
            uploadPromise[i].push(
              new Promise((resolve, reject) => {
                const link = item.link;
                const name = item.name;
                imageUpload(item.form)
                  .then((res) => {
                    // 上传图片接口
                    form[i]["data"][index] = {
                      url: res.data.url,
                      link,
                      name,
                    };
                    resolve(res);
                  })
                  .catch((err) => {
                    reject(err);
                  });
              })
            );
          });
        }
      }

      let [len, count] = [Object.keys(uploadPromise).length, 0];
      if (len) {
        for (let i in uploadPromise) {
          Promise.all(uploadPromise[i])
            .then((res) => {
              count++;
              if (count === len) {
                // 提交数据
              }
            })
            .catch((err) => {
              this.$message.error(err);
            });
        }
      } else {
        // 提交数据
      }
    },

    // 切换视图组件
    selectType(index) {

      this.isRight = false;
      this.props = this.view[index];
      this.$nextTick(() => (this.isRight = true));


    },
    deleteItem(e, index) {
      if (this.vip == 0) {
        this.$message.error('权限不足');
      } else {
        e.preventDefault();
        e.stopPropagation();
        this.view.splice(index, 1);
        this.isRight = false;
        this.props = {};

      }

    },
    // 拖拽类型
    dragStart(e) {
      if (this.vip == 0) {
        return
      } else {
        this.type = e.target.dataset.type;

      }
    },
    // 结束拖拽
    dragEnd(e) {
      if (this.vip == 0) {
        this.$message.error('权限不足');
        return

      } else {

        this.isPush = false;
        this.type = null;

      }

    },
    //中间拖拽
    onMove(e) {
      if (this.vip == 0) {
        return false
      } else {
        return true

      }
    },
    onEnd(e) {
      if (this.vip == 0) {
        this.$message.error('权限不足');
        return
      } else {

      }
    },
    // 已放置到指定位置
    drog(e) {
      if (this.vip == 0) {
        return
      } else {
        if (!this.type) {
          // 内容拖拽
          return;
        }
        e.preventDefault();
        e.stopPropagation();
        this.dragEnd();
      }

    },
    // 移动中
    dragOver(e) {
      if (this.vip == 0) {
        return
      } else {
        if (!this.type) {
          // 内容拖拽

          return;
        }
        e.preventDefault();
        e.stopPropagation();

        let className = e.target.className;
        let name = className !== "view-content" ? "item" : "view-content";
        const defaultData = {
          type: this.type, // 组件类型
          status: 1, // 默认状态
          data: [], // 数据
          options: {}, // 选项操作
          tabType: 1
        };
        if (name == "view-content") {
          if (!this.isPush) {
            this.index = this.view.length;
            this.isPush = true;
            this.view.push(defaultData);
          }
        } else if (name == "item") {
          let target = e.target;
          let [y, h, curIndex] = [
            e.offsetY,
            target.offsetHeight,
            target.dataset.index,
          ];
          let direction = y < h / 2;

          if (!this.isPush) {
            // Push to Top or Bottom
            if (direction) {
              if (curIndex == 0) {
                this.view.unshift(defaultData);
              } else {
                this.view.splice(curIndex, 0, defaultData);
              }
            } else {
              curIndex = +curIndex + 1;
              this.view.splice(curIndex, 0, defaultData);
            }
          } else {
            // Moving
            if (direction) {
              var i = curIndex == 0 ? 0 : curIndex - 1;
            } else {
              var i = +curIndex + 1;
            }


            const temp = this.view.splice(this.index, 1);
            this.view.splice(curIndex, 0, temp[0]);
          }
          this.index = curIndex;
          this.isPush = true;
        }
      }

    },


  },
};
</script>
<style lang="scss">
.decoration-edit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: #f7f8f9;
  height: calc(100vh - 50px);
  position: relative;

  .l,
  .r {
    width: 500px;
    height: 100%;
    padding: 15px 0;
    background: #fff;
  }

  .l {
    ul {
      margin: 0;
      padding: 0;

      li {
        width: 80px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        cursor: default;
        list-style: none;
        font-size: 14px;
        color: #666;
        float: left;
        margin: 0 10px;
        border-radius: 6px;
        transition: all 0.3s;
        cursor: pointer;

        &:hover {
          background: #efefef;
        }

        span {
          display: block;
          font-size: 40px;
          margin-bottom: 8px;
          color: #999;
        }

        p {
          display: block;
          margin: 0;
          font-size: 12px;
        }
      }
    }
  }

  .c {
    width: auto;
    max-width: 400px;
    position: relative;

    .top-nav {
      position: absolute;
      top: 0;
      background: #fff;
      z-index: 999;
      transition: all 0.3s;

      & * {
        pointer-events: none;
      }

      &:hover {
        transform: scale(0.95);
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 0 10px #afafaf;
      }

      .tit {
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
      }

      img {
        max-width: 100%;
        image-rendering: -moz-crisp-edges;
        image-rendering: -o-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;
      }
    }

    .view-content {
      width: 330px;
      height: 600px;
      background: #f5f5f5;
      overflow-y: auto;
      overflow-x: hidden;
      // padding-top: 72px;
      box-shadow: 0 2px 6px #ccc;

      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-thumb {
        background: #dbdbdb;
      }

      &::-webkit-scrollbar-track {
        background: #f6f6f6;
      }

      .item {
        transition: all 0.3s;

        // background: #fff;
        &:hover {
          transform: scale(0.95);
          border-radius: 10px;
          box-shadow: 0 0 10px #afafaf;

          .el-icon-error {
            display: block;
          }
        }

        div {
          pointer-events: none;
        }

        .wait {
          background: #deedff;
          height: 35px;
          text-align: center;
          line-height: 35px;
          font-size: 12px;
          color: #666;
        }

        .el-icon-error {
          position: absolute;
          right: -10px;
          top: -6px;
          color: red;
          font-size: 25px;
          cursor: pointer;
          display: none;
          z-index: 9999;
        }
      }
    }
  }

  .submit-btn {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.btn {
  position: relative;
  top: 45%;
  left: 90%;
}
</style>
